<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>待做清单</title>
    <script src="vue3.js"></script>
</head>
<body>
    <div id="app">
        <div>
            <input v-model="newToDo"/>
            <button @click="handleAdd">Add todo</button>
        </div>
        <ul>
            <li v-for="(item,index) in [...todos].reverse()" :key="item.id">
                {{index}} : {{item.id}} -- {{item.text}}
                <button @click="handleDelete(item.id)">x</button>
            </li>
        </ul>
    </div>
    <script>
        let {createApp} = Vue

        let index = 1000;
        createApp({
            data(){
                return {
                    newToDo:'',
                    todos: [
                        {id: ++index, text: '学习 html'},
                        {id: ++index, text: '学习 javascript'},
                        {id: ++index, text: '学习 css'},
                    ]
                }
            },
            methods:{
                handleAdd(){
                    this.todos.push({id: ++index, text: this.newToDo})
                    // this.todos.unshift({id: ++index, text: this.newToDo})
                    // this.todos = [{id: ++index, text: this.newToDo},...this.todos]
                    this.newToDo = ''
                },
                handleDelete(id){
                    //方式1
                    // let index = -1
                    // for(let i in this.todos){
                    //     if(this.todos[i].id === id){
                    //         index = i
                    //     }
                    // }
                    // alert(index)

                    //方式2
                    // let index = this.todos.findIndex(function (item){
                    //     return item.id === id
                    // })
                    // this.todos.splice(index,1)

                    //方式3
                    // this.todos.splice(this.todos.findIndex(item => item.id===id),1)

                    //方式4
                    this.todos = this.todos.filter(item => item.id !== id)
                }
            }
        }).mount('#app')
    </script>
</body>
</html>